<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			label:hover {
				cursor: pointer;
			}

			.box {
				width: 100%;
				border: 1px solid #ccc;
			}

			.box .item {
				float: left;
				border: 1px solid #ccc;
			}

			.box .item3 {
				width: 40%;
			}

			.generateBtn {
				width: 80%;
				height: 50px;
				line-height: 50px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item item1">
				<label><input type="checkbox" name="controlType" value="安全帽检测">安全帽检测</label></br>
				<label><input type="checkbox" name="controlType" value="反光背心检测">反光背心检测</label></br>
				<label><input type="checkbox" name="controlType" value="火灾识别检测">火灾识别检测</label></br>
				<label><input type="checkbox" name="controlType" value="安全边界识别检测">安全边界识别检测</label></br>
				<label><input type="checkbox" name="controlType" value="渣土车清洗检测">渣土车清洗检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="塔机吊物上站人检测">塔机吊物上站人检测</label></br>
				<label><input type="checkbox" name="controlType" value="强风天气塔吊运转检测">强风天气塔吊运转检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="高处作业安全带系挂检测">高处作业安全带系挂检测</label></br>
				<label><input type="checkbox" name="controlType" value="深基边坡渗水开裂剥落检测">深基边坡渗水开裂剥落检测</label></br>
				<label><input type="checkbox" name="controlType" value="基坑边堆放料具检测">基坑边堆放料具检测</label></br>
				<label><input type="checkbox" name="controlType" value="基坑周围裂缝检测">基坑周围裂缝检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="吊篮空置高空悬挂检测">吊篮空置高空悬挂检测</label></br>
				<label><input type="checkbox" name="controlType" value="吊篮作业人员数量检测">吊篮作业人员数量检测</label></br>
				<label><input type="checkbox" name="controlType" value="吊篮违规架梯作业检测">吊篮违规架梯作业检测</label></br>
				<label><input type="checkbox" name="controlType" value="升降车乘坐人员数量检测">升降车乘坐人员数量检测</label></br>
			</div>
			<div class="item item2">
				<label><input type="checkbox" name="controlType" value="施工现场吸烟检测">施工现场吸烟检测</label></br>
				<label><input type="checkbox" name="controlType" value="脚手架外侧密目网封闭检测">脚手架外侧密目网封闭检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="夜间违规施工检测">夜间违规施工检测</label></br>
				<label><input type="checkbox" name="controlType" value="露天作业湿法降尘措施检测">露天作业湿法降尘措施检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="出入口通道路面硬化检测">出入口通道路面硬化检测</label></br>
				<label><input type="checkbox" name="controlType" value="出入口通道积泥积尘检测">出入口通道积泥积尘检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="工地围挡污染破碎检测">工地围挡污染破碎检测</label></br>
				<label><input type="checkbox" name="controlType" value="重污染天气违章作业检测">重污染天气违章作业检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="施工现场搅拌作业检测">施工现场搅拌作业检测</label></br>
				<label><input type="checkbox" name="controlType" value="渣土车封闭运输检测">渣土车封闭运输检测</label></br>
				<label><input type="checkbox" name="controlType" value="非道路移动机械进出场检测">非道路移动机械进出场检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="露天焚烧建筑垃圾检测">露天焚烧建筑垃圾检测</label></br>
				<hr>
				<label><input type="checkbox" name="controlType" value="渣土车备案管理">渣土车备案管理</label></br>
				<label><input type="checkbox" name="controlType" value="裸地覆盖检测">裸地覆盖检测</label></br>
			</div>
			<div class="item item3">
				<button onclick="generate()" class="generateBtn">确定</button></br>
				<textarea rows="5" cols="50" id="chechedResult"></textarea>
				<button id="cpBtn" onclick="cp()">copy</button>
			</div>
			<div style="clear: both;"></div>
		</div>

	</body>
</html>

<script type="text/javascript">
	function cp(){
		let chechedResult = document.getElementById("chechedResult");
		chechedResult.select();
		document.execCommand("copy");
		chechedResult.value="";
		location.reload()
	}
	function generate() {
		document.getElementById("chechedResult").value=getCheckBoxString("controlType")
	}
	/**
	 * 版权声明：本文为CSDN博主「qq_39621440」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
	 * 原文链接：https://blog.csdn.net/qq_39621440/article/details/76100455
	 * @param {Object} nameVal
	 */
	function getCheckBoxVal(nameVal) {
		var inputs = document.getElementsByName(nameVal);
		var checkVal = [];
		var k = 0; //用来作checkVal数组的下标
		for (var i = 0, len = inputs.length; i < len; i++) {
			if (inputs[i].checked) {
				checkVal[k] = inputs[i].value;
				k++;
			}
		}
		return checkVal;
	}

	function getCheckBoxString(nameVal) {
		var arr = getCheckBoxVal(nameVal);
		if (arr.length > 0) {
			let r ="";
			for (var i = 0; i < arr.length; i++) {
				let c = arr[i];
				if(i==0){
					r+=c;
				}else{
					r+="、"+c;
				}
			}
			return r;
		}
		return "";
	}
</script>
